Schema by Figma Tokyo
Schema by Figma Tokyo
https://schema.figma.com/tokyo
デザインシステムをテーマとしたFigma主催のイベント
2022/11
https://gyazo.com/e1adc336f8a01a0cbecb8afe889c9c7a https://gyazo.com/d2f6ea37021eda1aa3dacf3b708262ab
オープニング
デザインシステムの定義が広がっている。
プロセスだったり、思考法だったり。
関与している人、プロジェクトが増えて、多様化して、複雑化しているため、そうなってくることは仕方ない。
【フリーフォームデザイン】と【構造的なデザイン】
どちらも大事。Figmaはどちらもカバーしたい。
フリーフォームデザインと構造的なデザインは、いったりきたりする。
現在のデザイン→複雑性が増している。
レイアウト
時として、バージョンが複数必要になる。
すごく沢山のレイアウトが存在すると、管理が大変になる。
ネスティングというアイデアが有効。
Thmeing（テーマづけ）
ライトモード、ダークモードだけでなく、それぞれのプロダクトに、それにあったテーマが増えることもある。
また、デスクトプ用のテーマ、モバイル用のテーマ
ヘッドレスデザインシステム
アウトラインとテキストだけ決めて、テーマはあとから決めることができる。
プロセス
ドキュメンテーション、プラグインもデザインシステムに含まれる。チームの効率化をする全てのタスクがデザインシステムの対象。
チームが大きくなるほど、アドホックな。
人・チームが増えるほど、プロセスが重要。
レイアウト、テーマ、プロセス、この3つが複雑になった。
テストを行って、ユーザーよりも前に誤りに気付くことが大事。
ブランチとマージを活用。
Big picture
コード寄りになったきた。
テストドリブンデザインはコードの世界からきている。
コードのコンパイアリングがあって、複雑になってきている。コードの複雑性に近づいている。
デザインシステムの初期は、みんなが間違わないようにする仕組みだった、ミスを避ける、なので、デザインシステムを摩擦を減らす仕組みと考える方がよい。
今までと違う何かを試したいと。
デザイナーの摩擦を減らして、よりクリエイティブを促進する。
チームにとってどんなアイデアを考えられるか。
チームによって文化も仕事の仕方が違うので、今日でた話をそのまま取り入れるのでなく、新しいアイデアを考える。
インハウスデザイン組織が考える社会課題解決におけるオープン化
富士通
社会課題解決とデザインシステム
共通するオープン化の重要性
プレゼンターのナナさん2年目
新卒2年目で課長
日常生活がデザインの力でよくなったと市民として実感がない。
社会課題→デザイン→エンジニアリング→サービス
デベロッパーを巻き込む
選べることが重要とデザイナーが考えがち。それがいいのか。
デザインシステムのライフサイクルも変わる。
ハコモノのようなプロダクト→イキモノのようなサービス
いいサービスは1デザイナーだけでは作れない。
社会課題も同じく、1企業だけでは解けない。
ヤフーにおけるFigmaを活用したデザインシステムの運用フロー
車輪の再発明をやめようと発足。
運用する中での課題
普及率が低い
運用にかけられるコストに制限がある
デザインメンバーが所属しているサービスから導入して、事例作り。全てのサービスに一気にアプローチすると莫大なコミュニケーションコストがかかる。
→少しずつ実績作っていった。
密なコミュニケーション
MTG
全サービスの担当が参加。そうすることで、課題の把握。
改善案もこの場で決めることができる。
チャット
ペアデザインを活用し、一気にタスクを消化。
ペアデザインとモブデザイン
作業している人の画面を共有する。
3つのアプローチを行った結果、よくなった。
“デザイン”のためじゃないデザインシステム
SmartHR
最近では、ユーザビリティテストのガイドを追加。
妥当な意思決定を早めるための補助線であって、法律ではない。
モブデザインを取り入れている。
同期的に作業を同時に行う。
※カードのスクラムでは、POふたりが
運営について。
つよつよデザイナーがガバナンス効かしているわけでなく、全員で運営。
プロダクト開発には多くの不確実性が含まれている。
自立・自走が浸透している組織では、運用のための更新手順を明文化しよう。
デザインシステムが接着剤のような役割となる。
18以上の製品を持つブランドハウスにデザイントークンを展開する方法
Atlassian
カラーシステムの問題
不足系
アクセシビリティの不足
ダークモード用のカラー展開
中間色
カスタマイズできるいい感じのものが
デザイントークンの話
★デザインシステムのFigmaの更新を定期的にTeamsで行う。皆を巻き込む。
ポケモンモード
ダークモードの定義
様々なパターンで検証した。
プラグインの開発を自社で行った。規模の大きい組織だからできるパワープレイ。
Token function
Education
開発者のためだけに作らないデザインシステム
note
デザイントークン
ボイス&トーン
デザインシステムの名前をつける
名前をみんなでアイデアを持ち寄って決める。
持久走
デザインシステムのターゲットは誰
→noteの場合は社員。
★制作OJTもデザインシステムに内包する
ボイス＆トーン
サービスの人格定義
プロダクトパーソナリティ
これは、PR, ディレクターにも関係。
できたあと
①巻き込み関連。
必要とする人以外の認知も重要。
プロセスも開示していくことで防げたかも。
②具体の活用やストーリーを重視する。
こう使うというストーリーを意識する。
真似してもらうことから始めてもらう。
チームラボのデザインシステムと思考の体系化
チームラボの受託業務の性質上、共通化されたデザインシステムは作れない。
あえて、車輪を再発明しまくっている。
デザインシステムはないけど、思考の体系化。
原則、ユーザーのための体験を考える。
Schema by Figma Tokyoに参加したので、そのメモ #Schema2022
SmartHRのプロダクトデザインの生産性を高める“デザイン”のためじゃないデザインシステムとは（Schema2022）
https://note.com/wentz_design/n/n93b7c11c5eca